<!--
 * @Description: 缺陷季度统计
 * @Author: wangzhong
 * @Date: 2021-10-27 11:49:17
 * @LastEditTime: 2022-07-15 15:34:17
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="data-statistics c6-container" style="overflow-y: auto;">
    <!-- 搜索框 -->
    <filter-form :form="form" :data="filterData" :has-default-operation="false" @search="search">
      <el-date-picker
        v-model="form.findStartDate"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="选择开始时间"
        :picker-options="pickerFindStartDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-date-picker
        v-model="form.findEndDate"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="请选择结束时间"
        :picker-options="pickerFindEndDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-button
        class="search-btn"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="search">查询</el-button>
      <el-button class="refresh-btn" size="mini" type="primary" icon="el-icon-refresh" @click="resetListQuery">重置</el-button>
    </filter-form>

    <!-- 表格 -->
    <div ref="main" slot="valueform" class="tableContainer widthPage v-flex-elastic">
      <!-- 表格title-->
      <p align="center" style="margin-top: 20px; font-size: 20px; font-family: san-serif; font-weight: bold">缺陷季度分布</p>
      <br>
      <!--<p align="center" style="margin-top: 20px; font-size: 20px; font-family: san-serif; font-weight: bold">
        <span style="margin-left: 20px;margin-right:5px;color: grey; font-size: 20px; font-family: san-serif; font-weight: bold">{{ startDate }}</span>
        至
        <span style="margin-left: 5px; color: grey; font-size: 20px; font-family: san-serif; font-weight: bold">{{ endDate }}</span>
      </p>-->
      <!-- 表格content -->
      <div style="display:flex;">
        <el-table
          v-loading="loading"
          :data="tableData"
          row-key="name"
          :load="load"
          border
          lazy
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="单位/部门" sortable align="left" width="250px" />
          <el-table-column prop="one" label="1季度" sortable align="center" />
          <el-table-column prop="two" label="2季度" sortable align="center" />
          <el-table-column prop="three" label="3季度" sortable align="center" />
          <el-table-column prop="four" label="4季度" sortable align="center" />
          <el-table-column prop="total" label="合计" sortable align="center" />
        </el-table>
      </div>
    </div>
    <!-- 线形图1（按单位） -->
    <div align="center" style="height: 350px;">
      <p align="center" style="margin-top: 20px; font-size: 20px; font-family: san-serif; font-weight: bold">缺陷时间分布曲线图(按单位)</p>
      <br>
      <div id="chart" v-loading="loading2" style="width: 100%; height: 100%;" />
    </div>
    <!-- 线形图2（按线路） -->
    <div align="center" style="height: 400px;">
      <p align="center" style="margin-top: 20px; font-size: 20px; font-family: san-serif; font-weight: bold">缺陷时间分布曲线图(按线路)</p>
      <br>
      <div id="chart2" v-loading="loading3" style="width: 100%; height: 100%;" />
    </div>
  </div>
</template>

<script>
import { findManageUnitDeptList, getRailtypeList, getLineList, defectLevelList, getDefectOriginList } from '@/api/platform'
import { getListByTypeCode } from '@/api/cms/basic'
import echarts from 'echarts'
import { getDefectSectionQuarterTableList, getDefectWorkShopQuarterTableList, getDefectLineQuarterTableList } from '@/api/cms/Statistical-report/Statistical-report-forms/DefectTypeStatistics'
export default {
  name: 'DefectQuarterStatistics',
  data() {
    return {
      // 搜索框
      unitDeptCode: '',
      filterData: {
        deptId: {
          width: 'auto',
          clearable: true,
          key: 'deptCode',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            this.unitDeptCode = vm
            this.form.lineId = ''
            this.filterData['lineId'].options = []
            this.form.railType = 'PT'
            // this.filterData['railType'].options = []
            this.tableData = []
            this.getList() // 加载下拉信息列表
            this.getTableData() // 查询列表信息
          }
        },
        // railType: {
        //   width: '156px',
        //   clearable: true,
        //   key: 'railType',
        //   type: 'select',
        //   title: '线路类型',
        //   placeholder: '请选择线路类型',
        //   options: [],
        //   props: { label: 'text', value: 'code' },
        //   changeFn: (vm) => {
        //     this.form.lineId = ''
        //     this.filterData['lineId'].options = []
        //     getLineList({ railType: vm, unitDeptCode: this.form.deptCode }).then(response => {
        //       this.filterData['lineId'].options = Object.freeze(response.data)
        //     })
        //   }
        // },
        lineId: {
          width: 'auto',
          clearable: true,
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [],
          props: { label: 'seclineName', value: 'seclineId' }
        },
        defectLevel: {
          width: 'auto',
          clearable: true,
          key: 'defectLevelID',
          type: 'select',
          title: '缺陷等级',
          placeholder: '请选择缺陷等级',
          options: [],
          props: { label: 'levelName', value: 'id' }
        },
        cType: {
          clearable: true,
          key: 'cType',
          type: 'select',
          title: '6C类型',
          placeholder: '请选择6C类型',
          options: [], // 装置类型,
          props: { label: 'itemName', value: 'itemValue' }
        }
      },
      deptCollection: [],
      // 查询参数
      form: {
        deptCode: '',
        railType: 'PT',
        lineId: '',
        defectLevelID: '',
        cType: '',
        findStartDate: '',
        findEndDate: '',
        deptCodeList: []
      },
      // 时间区间选择
      pickerFindStartDate: this.handleFindStartDate(),
      pickerFindEndDate: this.handleFindEndDate(),
      // 开始时间 - 结束时间
      startDate: '',
      endDate: '',

      // table数据
      tableData: [],
      deptCodeList: [],

      // 线形图数据
      echart: {
        series: [],
        name: []
      },
      // 加载
      loading: true,
      loading2: false,
      loading3: false
    }
  },
  mounted() {
    this.initPage()
    this.setDate()
  },
  methods: {
    // 查询发现开始日期控制
    handleFindStartDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.findEndDate) {
            return new Date(self.form.findEndDate) - 8.64e6 < time.getTime()
          }
        }
      }
    },
    // 查询发现结束日期控制
    handleFindEndDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.findStartDate) {
            return new Date(self.form.findStartDate) - 8.64e7 > time.getTime()
          }
        }
      }
    },
    // 初始化
    initPage() {
      // 获取单位 deptList
      findManageUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        // 通过单位标识确定接口，连接各段的数据库
        if (resData.length !== 0) {
          this.filterData['deptId'].options = response.data
          this.unitDeptCode = response.data[0].deptNo
          this.form.deptCode = response.data[0].deptNo
        }
        this.getList() // 加载下拉信息列表
        this.getTableData()
      })
    },
    // 下拉数据获取
    getList() {
      // this.filterData['railType'].options = []
      this.filterData['lineId'].options = []
      // 获取缺陷等级
      defectLevelList().then(response => {
        this.filterData.defectLevel.options = Object.freeze(response.data)
      })
      // getRailtypeList().then(response => {
      //   this.filterData.railType.options = Object.freeze(response.data)
      // })
      getLineList({ railType: 'PT', unitDeptCode: this.unitDeptCode }).then(response => {
        this.filterData.lineId.options = Object.freeze(response.data)
      })
      // 获取c类型
      getListByTypeCode({ typeCode: 'JCJCTYPE' }).then((response) => {
        this.filterData.cType.options = Object.freeze(response.data)
      })
    },
    // 时间设置
    setDate() {
      var date = new Date()
      this.endDate = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
      date.setMonth(1)
      date.setDate(1)
      this.startDate = date.getFullYear() + '/' + (date.getMonth()) + '/' + date.getDate()
    },
    // 查询
    search() {
      if (this.form.findEndDate) {
        this.endDate = this.form.findEndDate
      } else {
        this.setDate()
      }
      if (this.form.findStartDate) {
        this.startDate = this.form.findStartDate
      } else {
        this.setDate()
      }
      this.getTableData()
    },
    // 重置查询
    resetListQuery() {
      this.setDate()
      this.form = {
        deptCode: '',
        railType: 'PT',
        lineId: '',
        defectLevelID: '',
        cType: '',
        findStartDate: '',
        findEndDate: '',
        deptCodeList: []
      }
      this.filterData['deptId'].options = []
      // this.filterData['railType'].options = []
      this.filterData['lineId'].options = []
      this.tableData = []
      this.initPage()
    },
    // 获取表格数据
    getTableData() {
      this.loading = true
      this.tableData = []
      getDefectSectionQuarterTableList(this.form).then(res => {
        res.data.forEach(item => {
          item.hasChildren = true
          this.tableData.push(item)
        })
        this.drawLine()
        this.loading = false
      })
    },
    // 表格二次加载
    load(tree, treeNode, resolve) {
      if (tree.deptCode.length === 6) {
        getDefectWorkShopQuarterTableList({
          deptCode: tree.deptCode,
          railType: this.form.railType,
          lineId: this.form.lineId,
          defectLevelID: this.form.defectLevelID,
          cType: this.form.cType,
          findStartDate: this.form.findStartDate,
          findEndDate: this.form.findEndDate }).then(res => {
          res.data.forEach(i => {
            i.hasChildren = true
          })
          resolve(res.data)
        })
      } else {
        getDefectLineQuarterTableList({ workShopCode: tree.deptCode,
          railType: this.form.railType,
          lineId: this.form.lineId,
          defectLevelID: this.form.defectLevelID,
          cType: this.form.cType,
          findStartDate: this.form.findStartDate,
          findEndDate: this.form.findEndDate }).then(res => {
          resolve(res.data)
        })
      }
    },
    drawLine() {
      getDefectWorkShopQuarterTableList(this.form).then(res => {
        this.loading2 = true
        this.echart.series = []
        this.echart.name = []
        if (res.data.length === 0) {
          this.getEchart(1)
        } else {
          res.data.forEach(item => {
            this.echart.name.push(item.name)
            var element = {
              name: '',
              type: 'line',
              smooth: true,
              data: []
            }
            element.name = item.name
            element.data.push(item.one)
            element.data.push(item.two)
            element.data.push(item.three)
            element.data.push(item.four)
            this.echart.series.push(element)
            this.getEchart(1)
          })
        }
      })
      getDefectLineQuarterTableList(this.form).then(res => {
        this.loading3 = true
        this.echart.series = []
        this.echart.name = []
        if (res.data.length === 0) {
          this.getEchart(2)
        } else {
          res.data.forEach(item => {
            this.echart.name.push(item.name)
            var element = {
              name: '',
              type: 'line',
              smooth: true,
              data: []
            }
            element.name = item.name
            element.data.push(item.one)
            element.data.push(item.two)
            element.data.push(item.three)
            element.data.push(item.four)
            this.echart.series.push(element)
            this.getEchart(2)
          })
        }
      })
    },
    // 画线图
    getEchart(id) {
      var text = ''
      var myChart = null
      if (id === 1) {
        myChart = echarts.init(document.getElementById('chart'))
      } else {
        myChart = echarts.init(document.getElementById('chart2'))
      }
      myChart.clear()
      var option = {}
      if (this.tableData.length === 0) {
        option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#909399',
              fontWeight: 'lighter',
              fontSize: 14
            }
          }
        }
      } else {
        option = {
          // 提示符
          tooltip: {
            trigger: 'axis',
            show: true
          },
          // X轴
          xAxis: {
            type: 'category',
            data: ['1季度', '2季度', '3季度', '4季度']
          },
          // y轴
          yAxis: {
            type: 'value'
          },
          grid: { // 显示数据的图表位于当前canvas的坐标轴
            left: '5%',
            right: '20%'
          },
          // 色彩标签
          legend: {
            type: 'scroll',
            x: 'right', // 靠右
            data: this.echart.name, // 这里要与下面的name对应
            orient: 'vertical',
            top: '5%'
          },
          // 线条数据
          series: this.echart.series
        }
      }
      if (id === 1) {
        this.loading2 = false
      } else {
        this.loading3 = false
      }
      myChart.setOption(option, true)
    }
  }
}
</script>
<style scoped>
.filter-form__container .el-form .eldateNewS{
  margin-bottom:10px ;
}
.filter-form__container .el-form .eldateNewS, .filter-form__container .el-form .el-input__inner {
    height: 28px;
      line-height: 28px;
    font-size: 14px;
}
</style>
